import styled from 'styled-components'
import background from 'images/personalCenter/background.png'

const PersonalCenterContainer = styled.div`
    width: 100%;
    height: 100%;
    display:flex;
    flex-direction:column;
       .personal{
           width: 100%;
           height: 1.6rem;
           background: url(${background}) no-repeat;
           background-size:100% 1.1rem; 
           .personalInfo{
               width:1.1rem;
               height: 100%;
               margin: 0 auto;
               padding-top: .1rem;
               .touxiang{
                   width:.65rem;
                   height: .65rem;
                   margin: 0 auto;
                   position: relative;
                   .touxiangImg{
                       width:100%;
                       height: 100%;
                       display:block;
                   }
                   .levelImg{
                       width:.2rem;
                       height: .2rem;
                       position:absolute;
                       top:.52rem;
                       left:.44rem;
                   }
               }
               .userName{
                   margin-top:.05rem;
                   height: .2rem;
                   line-height: .2rem;
                   font-size:.14rem;
                   font-weight:400;
                   text-align:center;
               }
               .content{
                   width:100%;
                   height: .55rem;
                   text-align:center;
                   display:flex;
                   padding-top:.04rem;
                   h4{
                       height:.17rem;
                       line-height:.17rem;
                       font-size:.12rem;
                       font-weight:400;
                       color:#C0C0C0;
                   }
                   h5{
                       margin-top:.02rem;
                       height:.19rem;
                       line-height:.19rem;
                       font-size:.13rem;
                       font-weight:bold;
                       color:#646464;
                   }
                   .haoping{
                       flex:1;
                   }
                   .renwudan{
                       flex:1;
                   }
               }
           }
       }
       .rwAndPj{
           width:100%;
           height:.74rem;
           background:#ddd;
       }
       

`



export default PersonalCenterContainer